<script>
import { GlTabs, GlTab } from '@gitlab/ui';
import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import { s__ } from '~/locale';
import { DASHBOARD_TYPES } from 'ee/security_dashboard/store/constants';

export default {
  operationalTabParameter: 'operational',
  i18n: {
    developmentTab: s__('SecurityReports|Development vulnerabilities'),
    operationalTab: s__('SecurityReports|Operational vulnerabilities'),
  },
  components: {
    GlTabs,
    GlTab,
  },
  mixins: [glFeatureFlagMixin()],
  inject: ['dashboardType'],
  computed: {
    hasHeaderSlot() {
      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
      return Boolean(this.$slots.header);
    },
    hasStickySlot() {
      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
      return Boolean(this.$slots.sticky);
    },
    hasSummarySlot() {
      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
      return Boolean(this.$slots.summary);
    },
    isProject() {
      return this.dashboardType === DASHBOARD_TYPES.PROJECT;
    },
    shouldShowTabs() {
      return this.dashboardType !== DASHBOARD_TYPES.PIPELINE;
    },
  },
};
</script>

<template>
  <section>
    <header v-if="hasHeaderSlot">
      <slot name="header"></slot>
    </header>

    <gl-tabs
      v-if="shouldShowTabs"
      sync-active-tab-with-query-params
      :content-class="{ 'gl-pt-0': isProject, 'gl-pt-7': !isProject }"
      nav-class="gl-mt-3"
    >
      <gl-tab :title="$options.i18n.developmentTab">
        <section v-if="hasSummarySlot" data-testid="summary-section">
          <slot name="summary"></slot>
        </section>

        <section
          v-if="hasStickySlot"
          data-testid="sticky-section"
          class="position-sticky gl-z-index-3 security-dashboard-filters"
        >
          <slot name="sticky"></slot>
        </section>

        <div class="row mt-4">
          <article class="col">
            <slot></slot>
          </article>
        </div>
      </gl-tab>
      <gl-tab
        :title="$options.i18n.operationalTab"
        :query-param-value="$options.operationalTabParameter"
      >
        <slot name="operational-empty-state"></slot>
      </gl-tab>
    </gl-tabs>

    <template v-else>
      <section v-if="hasSummarySlot" data-testid="summary-section" class="gl-pt-7">
        <slot name="summary"></slot>
      </section>

      <section
        v-if="hasStickySlot"
        data-testid="sticky-section"
        class="position-sticky gl-z-index-3 security-dashboard-filters"
      >
        <slot name="sticky"></slot>
      </section>

      <div class="row mt-4">
        <article class="col">
          <slot></slot>
        </article>
      </div>
    </template>
  </section>
</template>
